<template>
  <div class="button_container">
    <div
      class="button_container_div"
      :style="{ background: background }"
      :class="{
        button_container_div2: CheckImg,
        button_container_div4: homeType,
        button_container_div6: showAmount
      }"
    >
      <div v-if="showAmount">
        <div class="amountTitle">{{ $t('wallet_preAuthorizationAmount') }}</div>
        <div class="frozenAmount">{{ frozenAmount }}</div>
      </div>    
      <div v-if="CheckImg" class="button_container_div3">
        <div style="width: 14px; height: 14px;">
          <img
            style="width: 14px; height: 14px;"
            :src="
              urlType
                ? require('@/assets/img/login/login_ic_check_selected.svg')
                : require('@/assets/img/login/login_ic_check_unselected.svg')
            "
            @click="changeType"
          />
        </div>
        <div style="margin-left: 6px;">
          <span class="button_container_text" @click="changeType">{{
            $t('login_agreeTo')
          }}</span>
          <span
            class="button_container_text"
            @click="agreementClick"
            style="color: var(--text-color);"
            >{{ $t(agreementName) }}</span
          ><span v-show="$i18n.locale == 'ES'">&nbsp;{{ 'de Youdianstar.' }}</span>
        </div>
      </div>
      <div v-if="!custom" class="button_container_btn">
        <van-button
          round
          type="info"
          :plain="plain"
          size="large"
          :disabled="disabled"
          @click="click"
        >
          <slot></slot>
          {{ title }}
        </van-button>
      </div>
      <div v-else class="button_container_btn"><slot name="custom"></slot></div>
    </div>
  </div>
</template>

<script>
import share from '@/mixins/share'
export default {
  name: 'bottom-button',
  mixins: [share],
  props: {
    custom: {
      type: Boolean,
      default: false
    },
    plain: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    background: {
      type: String,
      default: '#f5f5f7'
    },
    disabled: {
      type: Boolean,
      default: false
    },
    CheckImg: {
      type: Boolean,
      default: false
    },
    homeType: {
      type: Boolean,
      default: false
    },
    agreementName: {
      type: String,
      default: 'text_depositAgreement1'
    },
    frozenAmount: {
      type: String,
      default: ''
    },
    showAmount: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      urlType: true
    }
  },
  methods: {
    click () {
      this.$emit('click')
    },
    changeType () {
      this.$emit('clickText', (this.urlType = !this.urlType))
    },
    agreementClick () {
      this.$emit('clickAgreement')
    }
  }
}
</script>

<style lang="scss" scoped>
.button_container {
  width: 100%;

  .button_container_div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    // align-items: center;
    width: 100%;
    min-height: 80px;
    z-index: 999;
    position: fixed;
    bottom: 0;
    .button_container_btn {
      font-size: 17px;
      font-weight: Bold;
      color: #ffffff;
      display: flex;
      padding: 0 var(--gap);
      width: 100%;
      box-sizing: border-box;
      min-height: 52px;
      ::v-deep .van-button--large {
        height: 52px;
      }
    }
    .amountTitle {
      font-size: 14px;
      font-weight: 500;
      text-align: center;
      color: var(--text-color);
      line-height: 16px;
      padding: 0 var(--gap);
    }
    .frozenAmount {
      font-size: 21px;
      font-weight: 600;
      text-align: center;
      color: var(--text-color);
      line-height: 25px;
      margin-bottom: 8px;
      padding: 0 var(--gap);
    }    
  }

  .button_container_div2 {
    min-height: 118px;
    box-shadow: 0px -3px 8px 0px rgba(0, 0, 0, 0.05);
    .button_container_div3 {
      display: flex;
      align-items: start;
      padding: 8px 14px 22px 14px;
      line-height: 14px;
      .button_container_text {
        font-size: 12px;
        font-weight: 500;
        text-align: left;
        color: #39404d;
        line-height: 14px;
      }
    }
  }
  .button_container_div4 {
    width: calc(100% - 28px);
    bottom: 14px;
    right: 14px;
    background: #ffffff;
    border: 1px solid #ffffff;
    box-shadow: 0px 0px 26px 0px rgba(0, 0, 0, 0.07);
    border-radius: 40px;
  }
  .button_container_div6 {
    min-height: 174px;
  }  
}
</style>
